import React from 'react';

import { Icon, Row, Card, Form, Col, Input, Cascader, Select, Button } from 'antd';

import { FormComponentProps } from 'antd/lib/form';

import { connect } from 'dva';
import { CascaderOptionType } from 'antd/lib/cascader';
import { Brand } from '@/models/brand';

import { ProductCategory } from '@/models/productCategory';

import { threeColumnsLayout, formItemLayout } from '@/common/layout/form';

import { Product } from '@/models/product';

const { Option } = Select;

interface ExtraButtonsProps {
  onSearch: () => void;
  onReset: () => void;
}

// 右上角按钮组
const ExtraButtons: React.FC<ExtraButtonsProps> = props => (
  <div className="horizon-button-group-reverse">
    <Button onClick={props.onReset}>重置</Button>
    <Button type="primary" onClick={props.onSearch}>
      查询结果
    </Button>
  </div>
);

// 搜索表单Title
const FormTitle: React.FC = () => (
  <div>
    <Icon type="search" />
    <span style={{ marginLeft: '5px' }}>筛选搜索</span>
  </div>
);

interface SearchFormProps extends FormComponentProps {
  onSearch: () => void;
  onReset: () => void;
  brands: Brand[];
  categories: ProductCategory[];
}

// 搜索表单
// eslint-disable-next-line react/prefer-stateless-function
class SearchForm extends React.Component<SearchFormProps> {
  render() {
    const { form, onSearch, onReset, brands, categories } = this.props;
    const { getFieldDecorator } = form;

    const brandOptions = brands.map(item => (
      <Option key={item.id} value={item.id}>
        {item.name}
      </Option>
    ));

    const categoryOptions: CascaderOptionType[] = categories.map(item => ({
      value: item.id.toString(),
      label: item.name,
      children: item.children
        ? item.children.map(child => ({
            value: child.id.toString(),
            label: child.name,
          }))
        : undefined,
    }));

    return (
      <Row>
        <Card title={<FormTitle />} extra={<ExtraButtons onSearch={onSearch} onReset={onReset} />}>
          <Form layout="horizontal" hideRequiredMark>
            <Row gutter={16}>
              <Col {...threeColumnsLayout}>
                <Form.Item {...formItemLayout} label="输入搜索">
                  {getFieldDecorator<Product>('name')(<Input placeholder="商品名称" />)}
                </Form.Item>
              </Col>
              <Col {...threeColumnsLayout}>
                <Form.Item {...formItemLayout} label="商品货号">
                  {getFieldDecorator<Product>('productSn')(<Input placeholder="商品货号" />)}
                </Form.Item>
              </Col>
              <Col {...threeColumnsLayout}>
                <Form.Item {...formItemLayout} label="商品分类">
                  {getFieldDecorator<Product>('productCategoryIds')(
                    <Cascader options={categoryOptions} placeholder="请选择" />,
                  )}
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col {...threeColumnsLayout}>
                <Form.Item {...formItemLayout} label="商品品牌">
                  {getFieldDecorator('brandId')(
                    <Select placeholder="请选择品牌">{brandOptions}</Select>,
                  )}
                </Form.Item>
              </Col>
              <Col {...threeColumnsLayout}>
                <Form.Item {...formItemLayout} label="上架状态">
                  {getFieldDecorator<Product>('publishStatus')(
                    <Select placeholder="全部">
                      <Option value={1}>上架</Option>
                      <Option value={0}>下架</Option>
                    </Select>,
                  )}
                </Form.Item>
              </Col>
              {/* <Col {...threeColumnsLayout}>
                <Form.Item {...formItemLayout} label="审核状态">
                  {getFieldDecorator<Product>('verifyStatus')(
                    <Select placeholder="全部">
                      <Option value="0">审核通过</Option>
                      <Option value="1">未审核</Option>
                    </Select>,
                  )}
                </Form.Item>
              </Col> */}
            </Row>
          </Form>
        </Card>
      </Row>
    );
  }
}

export default connect()(Form.create<SearchFormProps>()(SearchForm));
